<template>
  <div class="title-bar" :class="{ 'is-maximized': isMaximized }">
    <!-- 拖拽区域 -->
    <div class="title-bar-drag-region">
      <!-- Logo和标题 -->
      <div class="title-bar-content">
        <div class="title-bar-logo">
          <img src="/favicon-32x32.png" alt="RickPan" class="logo-icon" />
          <span class="app-name">RickPan</span>
        </div>
        
        <div class="title-bar-title" v-if="currentTitle">
          {{ currentTitle }}
        </div>
      </div>
    </div>

    <!-- 窗口控制按钮 -->
    <div class="title-bar-controls">
      <button 
        class="title-bar-button minimize-button"
        @click="handleMinimize"
        :title="$t('titleBar.minimize')"
      >
        <svg width="12" height="12" viewBox="0 0 12 12">
          <rect x="2" y="5" width="8" height="2" fill="currentColor"/>
        </svg>
      </button>

      <button 
        class="title-bar-button maximize-button"
        @click="handleMaximize"
        :title="isMaximized ? $t('titleBar.restore') : $t('titleBar.maximize')"
      >
        <svg v-if="!isMaximized" width="12" height="12" viewBox="0 0 12 12">
          <rect x="2" y="2" width="8" height="8" stroke="currentColor" stroke-width="1" fill="none"/>
        </svg>
        <svg v-else width="12" height="12" viewBox="0 0 12 12">
          <rect x="2" y="3" width="6" height="6" stroke="currentColor" stroke-width="1" fill="none"/>
          <rect x="4" y="1" width="6" height="6" stroke="currentColor" stroke-width="1" fill="none"/>
        </svg>
      </button>

      <button 
        class="title-bar-button close-button"
        @click="handleClose"
        :title="$t('titleBar.close')"
      >
        <svg width="12" height="12" viewBox="0 0 12 12">
          <path d="M2 2 L10 10 M10 2 L2 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useThemeStore } from '@/stores/theme'
import { useRoute } from 'vue-router'

const { t } = useI18n()
const themeStore = useThemeStore()
const route = useRoute()

// 响应式状态
const isMaximized = ref(false)

// 计算当前标题
const currentTitle = computed(() => {
  // 根据路由生成标题
  const routeTitle = route.meta?.title as string
  if (routeTitle) {
    return t(routeTitle)
  }
  return ''
})

// 检查是否在Electron环境
const isElectron = computed(() => {
  return !!(window as any).electronAPI
})

// 窗口控制方法
const handleMinimize = async () => {
  if (!isElectron.value) return
  
  try {
    await (window as any).electronAPI.app.minimize()
  } catch (error) {
    console.error('最小化窗口失败:', error)
  }
}

const handleMaximize = async () => {
  if (!isElectron.value) return
  
  try {
    await (window as any).electronAPI.app.maximize()
    // 更新最大化状态
    updateMaximizedState()
  } catch (error) {
    console.error('最大化窗口失败:', error)
  }
}

const handleClose = async () => {
  if (!isElectron.value) return
  
  try {
    await (window as any).electronAPI.app.close()
  } catch (error) {
    console.error('关闭窗口失败:', error)
  }
}

// 更新窗口最大化状态
const updateMaximizedState = async () => {
  if (!isElectron.value) return
  
  try {
    isMaximized.value = await (window as any).electronAPI.app.isMaximized()
  } catch (error) {
    console.error('获取窗口状态失败:', error)
  }
}

// 双击标题栏最大化/还原
const handleDoubleClick = () => {
  handleMaximize()
}

// 生命周期
onMounted(() => {
  updateMaximizedState()
  
  // 监听窗口状态变化（如果有相关事件）
  const interval = setInterval(updateMaximizedState, 1000)
  
  onUnmounted(() => {
    clearInterval(interval)
  })
})
</script>

<style scoped lang="scss">
.title-bar {
  display: flex;
  align-items: center;
  height: 32px;
  width: 100%; // 确保占满整个宽度
  background-color: var(--bg-color-secondary);
  border-bottom: 1px solid var(--border-color-light);
  user-select: none;
  position: relative;
  z-index: 1000;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  box-sizing: border-box; // 确保padding不会影响宽度

  // 拖拽区域
  .title-bar-drag-region {
    flex: 1;
    height: 100%;
    width: 100%; // 确保拖拽区域占满宽度
    -webkit-app-region: drag;
    display: flex;
    align-items: center;
    padding: 0 8px;
    box-sizing: border-box;
  }

  // 标题内容
  .title-bar-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
  }

  .title-bar-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    
    .logo-icon {
      width: 16px;
      height: 16px;
    }
    
    .app-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-color-primary);
    }
  }

  .title-bar-title {
    font-size: 13px;
    color: var(--text-color-secondary);
    opacity: 0.8;
  }

  // 窗口控制按钮区域
  .title-bar-controls {
    display: flex;
    height: 100%;
    -webkit-app-region: no-drag;
  }

  .title-bar-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--text-color-primary);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover {
      background-color: var(--bg-color-hover);
    }

    &:active {
      background-color: var(--bg-color-active);
    }

    svg {
      opacity: 0.8;
      transition: opacity 0.2s ease;
    }

    &:hover svg {
      opacity: 1;
    }
  }

  // 关闭按钮特殊样式
  .close-button {
    &:hover {
      background-color: #e81123;
      color: white;
    }

    &:active {
      background-color: #c50e1f;
    }
  }

  // 最大化状态下的样式调整
  &.is-maximized {
    .title-bar-drag-region {
      padding-top: 0;
    }
  }
}

// 暗色主题适配
.theme-dark .title-bar {
  .close-button {
    &:hover {
      background-color: #e81123;
      color: white;
    }
  }
}

// 主题色适配
.title-bar-logo .app-name {
  color: var(--theme-primary);
}

// 添加CSS变量定义
.title-bar {
  --title-bar-bg: var(--bg-color-secondary);
  --title-bar-border: var(--border-color-light);
  --title-bar-text: var(--text-color-primary);
  --title-bar-text-secondary: var(--text-color-secondary);
  --title-bar-hover: var(--bg-color-hover, rgba(0, 0, 0, 0.05));
  --title-bar-active: var(--bg-color-active, rgba(0, 0, 0, 0.1));
}

// 暗色主题下的变量覆盖
.theme-dark .title-bar {
  --title-bar-hover: rgba(255, 255, 255, 0.05);
  --title-bar-active: rgba(255, 255, 255, 0.1);
}

// 确保标题栏在所有主题下都有正确的背景
.title-bar {
  background-color: var(--title-bar-bg);
  border-bottom-color: var(--title-bar-border);

  .title-bar-logo .app-name {
    color: var(--title-bar-text);
  }

  .title-bar-title {
    color: var(--title-bar-text-secondary);
  }

  .title-bar-button {
    color: var(--title-bar-text);

    &:hover {
      background-color: var(--title-bar-hover);
    }

    &:active {
      background-color: var(--title-bar-active);
    }
  }
}
</style>
